<template>
  <footer class="footer">
    <main>
      <a href="/">
        <span>©KEEHOHO Personal. All Rights Reserved.</span>
      </a>
      <a href="https://beian.miit.gov.cn">
        <img :src="logo" />
        <span>粤ICP备2022109786号</span>
      </a>
    </main>
  </footer>
</template>
<script>
export default {
  name: 'co-footer',
  computed: {
    logo() {
      return this.$config?.CONFIG_CDN_HOST + '/img/icon-beian.png';
    },
  },
};
</script>
<style lang="less" scoped>
.footer {
  background-color: #000;
  main {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    border-top: 1px solid #292929;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      color: inherit;
      display: inline-flex;
      align-items: center;
      font-size: 14px;

      &:hover {
        text-decoration: underline;
      }

      img {
        display: block;
        width: 20px;
        margin-right: 6px;
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .footer {
    main {
      flex-direction: column;

      a + a {
        margin-top: 12px;
      }
    }
  }
}
</style>
